{extend name="common/common" /} {block name="style"}
<style type="text/css">
	.container-fluid .btn {
		float: right;
		margin-left: 10px;
	}
	.btn.btn-sm {
		margin: 0;
	}
	.layui-input.layui-unselect {
		width: 182px;
	}
	.layui-input-block {
		margin-left: 80px;
	}
	.layui-input.layui-unselect{
		width: 85px;
	}
	/* #cusTable tr{
		cursor: pointer;
	} */
	.ibox.float-e-margins{
		margin-bottom: 0;
	}
	.chartTips{
		position: absolute;
		left: 40%;
		top: 48%;
		z-index: 999;
	}
</style>
{/block} {block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="ibox float-e-margins">
		<div class="ibox-title">
            <h5>图表工具栏</h5>
        </div>
        <div class="ibox-content">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="seaTimePic" name="seaTimePic" placeholder="时间范围(默认1个月)">
				</div>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="seaTimeStep" name="seaTimeStep" placeholder="时间步长(默认1天,单位:天)">
				</div>
				<div class="layui-inline">
					<button type="button" id="searchPic" class="btn btn-info" style="margin-top: 2px;">查询</button>
				</div>
			</div>
        </div>
	</div>
	<div class="layui-col-md6" style="padding:5px;">
        <div class="ibox-title">
            <h5>财务统计条形图</h5>
        </div>
        <div class="ibox-content" style="overflow:auto;">
			<div class="chartTips">
				图表加载中:Loading...
			</div>
			<div id="LinePic" style="width: 100%;height:300px; min-width:400px;"></div>
        </div>
	</div>
	<div class="layui-col-md6" style="padding:5px;">
        <div class="ibox-title">
            <h5>财务统计饼形图</h5>
        </div>
        <div class="ibox-content"  style="overflow:auto;">
			<div class="chartTips">
				图表加载中:Loading...
			</div>
			<div id="PiePic" style="width: 100%;height:300px; min-width:400px;"></div>
        </div>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>财务统计表格</h5>
		</div>
		<div class="ibox-content">
			<form class="layui-form" action="" id="seaForm">
				<div class="layui-form-item">
					<div class="layui-input-inline">
						<input type="text" name="seaSn" id="seaSn" placeholder="订单单号/流水单号" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width:100px;">
						<input type="text" name="seaName" id="seaName" placeholder="姓名" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 85px;">
						<select name="seaSource" id="seaSource">
							<option value="" selected>来源</option>
							<option value="0">学费</option>
							<option value="1">报销</option>
							<option value="2">罚款</option>
							<option value="3">退款</option>
							<option value="4">其他</option>
						</select>
					</div>

					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" class="layui-input" id="seaTime" name="seaTime" placeholder="时间范围">
						</div>
					</div>
					<div class="layui-inline">
						<button type="button" id="search" class="btn btn-info" style="margin-top: 2px;">查询</button>
					</div>
					<div class="layui-inline">
						<button type="button" id="seaTimeDate" class="btn btn-default reportBtns" style="margin-top: 2px;">日报</button>
					</div>
					<div class="layui-inline">
						<button type="button" id="seaTimeWeek" class="btn btn-success reportBtns" style="margin-top: 2px;">周报</button>
					</div>
					<div class="layui-inline">
						<button type="button" id="seaTimeMonth" class="btn btn-success reportBtns" style="margin-top: 2px;">月报</button>
					</div>
					<div class="layui-inline">
						<button type="button" id="seaTimeQuarter" class="btn btn-success reportBtns" style="margin-top: 2px;">季报</button>
					</div>
					<div class="layui-inline">
						<button type="button" id="seaTimeYear" class="btn btn-success reportBtns" style="margin-top: 2px;">年报</button>
					</div>

				</div>
			</form>
			<table id="cusTable">
				<thead>
					<th class="text-center" data-align="center" data-field="id" data-sortable="true" data-sort-name="id">ID <i class='fa fa-sort' id="fa-id"></i></th>
					<th class="text-center" data-align="center" data-field="order_sn">订单单号</th>
					<th class="text-center" data-align="center" data-field="account_sn">流水单号</th>
					<th class="text-center" data-align="center" data-field="source_name">来源</th>
					<th class="text-center" data-align="center" data-field="name">学员/报销人</th>
					<th class="text-center" data-align="center" data-field="from">学校专业/部门</th>
					<th class="text-center" data-align="center" data-field="receivables_time" data-sortable="true" data-sort-name="receivables_time">付款时间 <i class='fa fa-sort' id="fa-receivables_time"></i></th>
					<th class="text-center" data-align="center" data-field="status_name">状态</th>
					<th class="text-center" data-align="center" data-field="total_amount_name">金额</th>
				</thead>
			</table>
		</div>
	</div>
</div>
<!-- <div class="remarksBox" style="display:none;padding:15px;"></div> -->
{/block}

{block name="script"}
<script type="text/javascript" src="__JS__/tableExport.js"></script>
<script type="text/javascript" src="__JS__/bootstrap-table-export.js"></script>
<script type="text/javascript" src="__JS__/getTime.js"></script>
<script type="text/javascript">
	var IDs = '';

	function initTable() {
		//先销毁表格
		$('#cusTable').bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据
		$("#cusTable").bootstrapTable({
			method: "get", //使用get请求到服务器获取数据
			url: "./accReportList", //获取数据的地址
			striped: true, //表格显示条纹
			pagination: true, //启动分页
			pageSize: 25, //每页显示的记录数
			pageNumber: 1, //当前第几页
			pageList: [25,50,100,150,200,500], //记录数可选列表
			sidePagination: "server", //表示服务端请求
			paginationFirstText: "首页",
			paginationPreText: "上一页",
			paginationNextText: "下一页",
			paginationLastText: "尾页",
			queryParamsType: "undefined",
			silentSort:true,//分页记住排序
			sortName:'receivables_time',
			sortOrder:'desc',
			showToggle:true,
			// showColumns:true,
			showExport: true,  //是否显示导出按钮
			exportTypes:['excel','csv'],  //导出文件类型
			Icons:'glyphicon-export',
			exportOptions:{
				ignoreColumn: [0,1],  //忽略某一列的索引
				fileName: '财务统计表格',  //文件名称设置
				worksheetName: '财务统计表格',  //表格工作区名称
				tableName: '财务统计表格',
				excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
				onMsoNumberFormat:function (cell, row, col) {
			       var result = "";
			       if (row > 0 && col == 0)
			           result = "\\@";
			       return result;
			   }
			},
			detailView:true,// true打开详细模式
			detailFormatter:function(index, row) {
				return "备注:"+row.remarks + "；经办人:" + row.agent_name;
			},
			queryParams: function queryParams(params) { //设置查询参数
				var param = {
					pageNumber: params.pageNumber,
					pageSize: params.pageSize,
					seaSn: $("#seaSn").val(),
					seaName: $("#seaName").val(),
					seaSource: $("#seaSource").val(),
					seaStatus:1,
					seaTime:$("#seaTime").val(),
					sortName:this.sortName,
					sortOrder:this.sortOrder,
				};
				return param;
			},
			onLoadSuccess: function(res) { //加载成功时执行
				if (111 == res.code) {
					window.location.reload();
				}
				layer.msg("表格加载成功", {time: 1000});
				var tr = '<tr><td colspan="9" class="text-right span-strong">总计</td>'
					   + '<td class="text-center span-strong">' + res.sum + '</td></tr>';
				$("#cusTable tbody").append(tr);
			},
			onLoadError: function() { //加载失败时执行
				layer.msg("加载数据失败");
			},
			onSort:function(name,order){ //切换排序图标
				var idName = 'fa-' + name;
				var oSort = document.getElementById(idName);
				var oFaId = document.getElementById('fa-id');
				var oFaTm = document.getElementById('fa-receivables_time');
				oFaId.className = 'fa fa-sort';
				oFaTm.className = 'fa fa-sort';
				order == 'asc'?oSort.className = 'fa fa-sort-up':oSort.className = 'fa fa-sort-down';
			}
		});
	}

	function getChartData(){
		var time_slot = $("#seaTimePic").val(),time_step = $("#seaTimeStep").val();
		var myChart = echarts.init(document.getElementById('LinePic'));
		var myChart_pie = echarts.init(document.getElementById('PiePic'));
		$(".chartTips").show();
		$.post("./statistics",{time_slot:time_slot,time_step:time_step},function(res){
		    if(res.code == 1){
				var option = {
					title: {text: '财务收支对比'},
			        tooltip: {trigger: 'axis'},
			        legend: {
			            data:['支出','收入']
			        },
			        grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true
			        },
			        toolbox: {
			            show:true,
			            feature: {
			                dataView: {readOnly: true},
			                magicType: {type: ['line','bar']},
			                restore: {},
			                saveAsImage: {}
			            }
			        },
			        xAxis: {
			            type: 'category',
			            boundaryGap: true,
			            data: res.Xdata
			        },
			        yAxis: {
			            type: 'value',
			            axisLabel: {formatter: '￥{value}'}
			        },
			        series: [
			            {
			                name:'支出',
			                type:'line',
			                smooth: true,
			                data:res.redData
			            },
			            {
			                name:'收入',
			                type:'line',
			                smooth: true,
			                data:res.bluData
			            }
			        ]
			    },
				option_pie = {
					title : {
						text: '财务流水组成',
						subtext: '报销退款为支出，其余为收入',
						x:'center'
					},
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
				        data: ['学费','报销','罚款','退款','其他']
				    },
					toolbox: {
			            show:true,
			            feature: {
			                dataView: {readOnly: true},
			                restore: {},
			                saveAsImage: {}
			            }
			        },
				    series : [
				        {
				            name: '财务流水组成',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:res.pieData,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
				myChart.setOption(option);
				myChart_pie.setOption(option_pie);
				$(".chartTips").hide();
				layer.msg(res.msg);
			}else{
				layer.msg(res.msg,{anim:6});
			}

		});
	}
	$(function() {
		var seaTime = '';
		//调用函数，初始化表格
		initTable();
		//调用函数，初始化图表
		getChartData();
		layui.use(['form','laydate'], function() {
			var form = layui.form,laydate = layui.laydate;
			laydate.render({elem: '#seaTime',range: true});
			laydate.render({elem: '#seaTimePic',range: true});
		});
		//当点击查询按钮的时候执行
		$("#search").bind("click", function(){
			initTable();
		});

		$("#searchPic").on("click",function(){
			getChartData();
		});

		$(".reportBtns").on('click',function(){
			$(".reportBtns").addClass('btn-success').removeClass('btn-default');
			$(this).addClass('btn-default');
		});
		//日报
		$("#seaTimeDate").on('click',function(){
			if(seaTime != ""){
				seaTime = "";
				$("#seaTime").val("");
				initTable();
			}
		});
		//周报
		$("#seaTimeWeek").on('click',function(){
			var week = getWeekStartDate() + " - " + getWeekEndDate();
			if(week != seaTime){
				seaTime = week;
				$("#seaTime").val(week);
				initTable();
			}
		});
		//月报
		$("#seaTimeMonth").on('click',function(){
			var month = getMonthStartDate() + " - " + getMonthEndDate();
			if(month != seaTime){
				seaTime = month;
				$("#seaTime").val(month);
				initTable();
			}
		});
		//季报
		$("#seaTimeQuarter").on('click',function(){
			var quarter = getQuarterStartDate() + " - " + getQuarterEndDate();
			if(quarter != seaTime){
				seaTime = quarter;
				$("#seaTime").val(quarter);
				initTable();
			}
		});
		//年报
		$("#seaTimeYear").on('click',function(){
			var year = new Date().getYear();
			year += (year < 2000) ? 1900 : 0;
			year = year + "-01-01 - " + year + "-12-31";
			if(year != seaTime){
				seaTime = year;
				$("#seaTime").val(year);
				initTable();
			}
		});
	});
</script>
{/block}
